<div *ngIf="pillar && pillarData && pillarPrinciples">
    <div class="d-flex align-items-center">
        <img [attr.src]="'/assets/img/principle/'+pillar.id+(pillarData.length > 0 ? '_on' : '_off')+'.png'" />
        <h3 class="ml-3 mb-0">{{ pillar.name }}</h3>
    </div>

    <div class="mt-5">
        <div *ngFor="let principle of pillar.principles" class="card shadow mb-4">

            <div class="d-flex align-items-center card-body">
                <div *ngIf="pillarPrinciples[principle.id]" (click)='getPrincipleData(principle.id)' class="collapsed pointer w-50 pr-3" data-toggle="collapse" [attr.data-target]="'#principle'+principle.id" aria-expanded="false"
                    [attr.aria-controls]="'principle'+principle.id">
                    <h4><i class="ti- mr-2"></i> Principle {{ principle.id }}</h4>
                    <p class="pl-4 pr-2">{{ principle.description }}</p>
                </div>
                <div *ngIf="!pillarPrinciples[principle.id]" class="w-50 pr-3">
                    <h4><i class="ti- mr-4"></i> Principle {{ principle.id }}</h4>
                    <p class="pl-4 pr-2">{{ principle.description }}</p>
                </div>
                <div class="w-50">
                    <div *ngIf="pillarPrinciples[principle.id]">
                        <div *ngIf="pillarPrinciples[principle.id].principleAssessment === gCAssessment.Watchlist" class="d-flex">
                            <img src="/assets/icons-svg/icon-watchlist.svg" class="global-compact-icon float-left mr-2" />
                            Watchlist
                        </div>
                        <div *ngIf="pillarPrinciples[principle.id].principleAssessment === gCAssessment['Non-Compliant']" class="d-flex">
                            <img src="/assets/icons-svg/icon-not-compliant.svg" class="global-compact-icon float-left mr-2" />
                            Non-Compliant
                        </div>
                    </div>
                    <div *ngIf="(gcSummary?.overallCompanyAssessment === gCAssessment.Compliant) || (hasBothLists && (!pillarPrinciples[principle.id]))" class="d-flex">
                        <img src="/assets/icons-svg/icon-no-evidence.svg" class="global-compact-icon float-left mr-2" />
                        No evidence of relevant controversies
                    </div>
                </div>
            </div>


            <div *ngIf="pillarPrinciples[principle.id]" class="collapse card-body bg-primary-light" [attr.id]="'principle'+principle.id">
                <div class="pt-2 px-4">
                    <h5>Issue</h5>
                    <p [innerHtml]="pillarPrinciples[principle.id].issue"></p>
                    <h5>Assessment Effective Since</h5>
                    <p>{{ pillarPrinciples[principle.id].principleAssessmentEffectiveSinceQuarter }}</p>

                    <div *ngIf="pillarPrinciples[principle.id].conclusion">
                        <hr />
                        <p [innerHtml]="pillarPrinciples[principle.id].conclusion.assessmentSummaryAndConclusionIntroductionSentence"></p>
                        <ul class="ml-3">
                            <li *ngFor="let comment of pillarPrinciples[principle.id].conclusion.assessmentComments" [innerHtml]="comment" class="mb-2"></li>
                        </ul>
                    </div>

                    <div *ngIf="pillarPrinciples[principle.id].impact" class="mt-4">
                        <h5>Analysis of Issue</h5>
                        <p [innerHtml]="pillarPrinciples[principle.id].impact.eventSummary"></p>
                        <p [innerHtml]="pillarPrinciples[principle.id].impact.impactSummary"></p>
                        <ul class="ml-3">
                            <li *ngFor="let comment of pillarPrinciples[principle.id].impact.impactComments" [innerHtml]="comment" class="mb-2"></li>
                        </ul>
                    </div>

                    <div *ngIf="pillarPrinciples[principle.id].management" class="mt-4">
                        <h5>Analysis of Company Management</h5>
                        <p [innerHtml]="pillarPrinciples[principle.id].management.managementSummary"></p>
                        <ul class="ml-3">
                            <li *ngFor="let comment of pillarPrinciples[principle.id].management.managementComments" [innerHtml]="comment" class="mb-2"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>